<template>
    <div class="app-container">
        <div class="wrapper team">
            <el-col :span="8" class="warp-main">
                <el-col :span="24">
                    <div class="el-bar">
                        <p>
                            <i class="iconfont icon-users"></i>查询条件</p>
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="查关键字">
                                <el-input v-model="teamQueryKey" placeholder="请输入关键字"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button icon="el-icon-search" type="primary" @click="teamQuery">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="el-bar" style="margin-top:10px;">
                        <p>
                            <i class="iconfont icon-users"></i>查询列表
                            <span>
                                <span>共{{teamsData.length}}</span>条</span>
                        </p>
                        <el-table v-loading="loadingTeamDataTable" ref="teamTable" :data="teamsData" highlight-current-row @row-click="teamChange" style="width: 100%;" class="search-list">
                            <el-table-column :show-overflow-tooltip="true" prop="nameCn" label="团队名称">
                            </el-table-column>
                            <el-table-column prop="teamUserCount" label="团队成员">
                            </el-table-column>
                            <el-table-column prop="teamNamespaceCount" label="团队空间">
                            </el-table-column>
                            <el-table-column prop="status" label="团队状态">
                            </el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="desc" label="描述">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-col>
            <el-col :span="16" class="warp-main function-form" style="padding-left:30px;">
                <el-col :span="24">
                    <div class="el-bar">
                        <p>
                            <i class="iconfont icon-users"></i>团队明细</p>
                        <el-form ref="teamDetail" :model="teamDetail" :rules="rules1" label-width="120px" class="form-top">
                            <el-form-item label="团队名称(中文)" prop="nameCn">
                                <el-input :disabled="teamDetail.nameCnDisable" v-model="teamDetail.nameCn" placeholder="团队中文名"></el-input>
                            </el-form-item>
                            <el-form-item label="团队名称(英文)" prop="nameEn">
                                <el-input :disabled="teamDetail.nameEnDisable" v-model="teamDetail.nameEn" placeholder="团队英文名"></el-input>
                            </el-form-item>
                            <el-form-item label="描述" prop="desc">
                                <el-input type="textarea" :rows="2" placeholder="团队描述" v-model="teamDetail.desc">
                                </el-input>
                            </el-form-item>
                            <div class="form-btn">
                                <el-form-item>
                                    <el-button class="iconfont icon-xinzeng" type="primary" @click="teamAdd">新增</el-button>
                                    <el-button class="iconfont icon-baocun" type="success" @click="teamSave">保存</el-button>
                                    <el-button class="iconfont icon-tingyong" :disabled="this.selectTeamId==''" type="danger" @click="teamDisable">停用</el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="24" class="warp-main" style="margin-top:10px;">
                    <div class="el-bar">
                        <p>
                            <i class="iconfont icon-users"></i>团队空间管理</p>
                        <!--工具条-->
                        <el-col :span="24" class="toolbar">
                            <el-form :inline="true" style="margin-top:0;">
                                <el-form-item>
                                    <el-button class="iconfont icon-msnui-shezhi" type="primary" @click="physicalGroupSetVisible=true;teamPhysicalGroupQuery();" :disabled="this.checkNamespaceIds.length===0">物理分组设置</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button class="iconfont icon-xinzeng" type="primary" @click="namespaceAddVisible=true;resetForm('namespaceDetail');" :disabled="this.selectTeamId==''">新增团队空间</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button class="iconfont icon-tingyong" @click="namespaceDisable" :disabled="this.checkNamespaceIds.length===0" type="danger">停用</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>

                        <!--数据列表-->
                        <el-table v-loading="loadingTeamNamespaceDataTable" :data="namespaceData" @row-click="namespaceChange" highlight-current-row style="width: 100%;" class="teamspace" @selection-change="namespacesChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="name" label="名称" sortable></el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="kubeName" label="k8s" sortable></el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="harborProjectName" label="镜像库名" sortable></el-table-column>
                            <el-table-column prop="type" label="类型" sortable></el-table-column>
                            <el-table-column prop="physicalGroup" label="物理分组" sortable></el-table-column>
                            <el-table-column prop="status" label="状态" sortable></el-table-column>
                        </el-table>

                        <!--添加节点弹框界面-->
                        <el-dialog title="物理分区设置" :visible.sync="physicalGroupSetVisible" :close-on-click-modal="true">
                            <el-form label-width="120px">
                                <el-form-item label="物理分组">
                                    <el-select v-model="physicalGroupId" placeholder="请选择">
                                        <el-option-group v-for="group in physicalGroupData" :key="group.label" :label="group.label">
                                            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-option-group>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button class="iconfont icon-fanhui" @click="physicalGroupSetVisible=false">取消</el-button>
                                <el-button class="iconfont icon-fuxuan" type="primary" @click="teamPhysicalGroupSet">确定</el-button>
                            </div>
                        </el-dialog>

                        <!--新增团队空间弹框界面-->
                        <el-dialog title="新增团队空间" :visible.sync="namespaceAddVisible" :close-on-click-modal="true">
                            <el-form ref="namespaceDetail" :model="namespaceDetail" :rules="rules2" label-width="120px" class="form-top">
                                <el-form-item label="命名空间名称" prop="name">
                                    <el-input v-model="namespaceDetail.name" placeholder="命名空间名称"></el-input>
                                </el-form-item>
                                <el-form-item label="k8s空间名(英文)" prop="kubeName">
                                    <el-input v-model="namespaceDetail.kubeName" placeholder="k8s空间名称"></el-input>
                                </el-form-item>
                                <el-form-item label="镜像库名称(英文)" prop="harborProjectName">
                                    <el-input v-model="namespaceDetail.harborProjectName" placeholder="镜像库名称"></el-input>
                                </el-form-item>
                                <el-form-item label="类型" prop="evn">
                                    <el-radio class="radio" v-model="namespaceDetail.env" label='0'>开发环境</el-radio>
                                    <el-radio class="radio" v-model="namespaceDetail.env" label='1'>测试环境</el-radio>
                                    <el-radio class="radio" v-model="namespaceDetail.env" label='2'>预生产环境</el-radio>
                                    <el-radio class="radio" v-model="namespaceDetail.env" label='3'>生产环境</el-radio>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button class="iconfont icon-fanhui" @click="namespaceAddVisible=false">取消</el-button>
                                <el-button class="iconfont icon-fuxuan" type="primary" @click="namespaceAdd">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </el-col>
                <el-col :span="24" class="warp-main" style="margin-top:10px;">
                    <div class="el-bar el-bar-bottom">
                        <p>
                            <i class="iconfont icon-users"></i>团队空间成员管理</p>
                        <!--工具条-->
                        <el-col :span="24" class="toolbar">
                            <el-form :inline="true" style="margin-top:0;">
                                <el-form-item>
                                    <el-button class="iconfont icon-xinzeng" type="primary" @click="preAddUserVisible=true;teamUserQuery();" :disabled="this.selectNamespaceId==''">添加新成员</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>

                        <!--数据列表-->
                        <el-table v-loading="loadingTeamUserDataTable" :data="userData" highlight-current-row style="width: 100%;" class="teamspace" @selection-change="usersChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="name" label="成员" sortable></el-table-column>
                            <el-table-column prop="roleName" label="角色" sortable></el-table-column>
                        </el-table>

                        <!--工具条删除节点-->
                        <el-col :span="24" class="toolbar">
                            <el-button class="delete" icon="el-icon-delete" @click="teamRemoveUsers" type="danger" :disabled="this.checkUserIds.length===0">移除</el-button>
                        </el-col>

                        <!--添加成员弹框界面-->
                        <el-dialog title="添加用户" :visible.sync="preAddUserVisible" :close-on-click-modal="true">
                            <el-form label-width="240px">
                                <el-select v-model="userId" multiple placeholder="请选择">
                                    <el-option-group v-for="group in preAddUserData" :key="group.label" :label="group.label">
                                        <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-option-group>
                                </el-select>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button class="iconfont icon-fanhui" @click="preAddUserVisible=false">取消</el-button>
                                <el-button class="iconfont icon-fuxuan" type="primary" @click="teamAddUsers">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </el-col>
            </el-col>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        var validateNameCn = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入团队中文名称'));
            } else {
                //名称唯一性校验
                let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_VALIDATE_TEAM_NAME, ['cn', value]);
                this.httpClient.httpClientget(url).then((response) => {
                    // 返回处理
                    let data = response.data;
                    if (data) {
                        callback(new Error('团队中文名重名,请换别的名称重试!'));
                    } else {
                        callback();
                    }
                });

            }
        };
        var validateNameEn = (rule, value, callback) => {
            let reg = /^[a-zA-Z]+$/;//英文字母验证
            if (value === '') {
                callback(new Error('请输入团队英文名称'));
            } else if (!reg.test(value)) {
                callback(new Error('英文字母类型格式不正确!'));
            } else {
                //名称唯一性校验
                let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_VALIDATE_TEAM_NAME, ['en', value]);
                this.httpClient.httpClientget(url).then((response) => {
                    // 返回处理
                    let data = response.data;
                    if (data) {
                        callback(new Error('团队英文名重名,请换别的名称重试!'));
                    } else {
                        callback();
                    }
                });

            }
        };
        var validateName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入命名空间名称'));
            } else {
                //名称唯一性校验
                let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_VALIDATE_NAMESPACE_NAME, ['name', value]);
                this.httpClient.httpClientget(url).then((response) => {
                    // 返回处理
                    let data = response.data;
                    if (data) {
                        callback(new Error('命名空间名称重名,请换别的名称重试!'));
                    } else {
                        callback();
                    }
                });

            }
        };
        var validateKubeName = (rule, value, callback) => {
            //let reg = /^[a-zA-Z]+$/;//英文字母验证
            let reg = /(^[a-z]){1}([a-z]|[0-9]|[-]){2,61}([a-z]|[0-9]){1}$/;//英文字母验证
            if (value === '') {
                callback(new Error('请输入k8s空间名称'));
            } else if (!reg.test(value)) {
                callback(new Error('英文字母类型格式不正确!'));
            } else {
                //名称唯一性校验
                let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_VALIDATE_NAMESPACE_NAME, ['k8s', value]);
                this.httpClient.httpClientget(url).then((response) => {
                    // 返回处理
                    let data = response.data;
                    if (data) {
                        callback(new Error('k8s空间名称重名,请换别的名称重试!'));
                    } else {
                        callback();
                    }
                });

            }
        };
        var validateHarborProjectName = (rule, value, callback) => {
            //let reg = /^[a-zA-Z]+$/;//英文字母验证
            let reg = /(^[a-z]){1}([a-z]|[0-9]|[-]){2,61}([a-z]|[0-9]){1}$/;//英文字母验证
            if (value === '') {
                callback(new Error('请输入镜像库名称'));
            } else if (!reg.test(value)) {
                callback(new Error('英文字母类型格式不正确!'));
            } else {
                //名称唯一性校验
                let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_VALIDATE_NAMESPACE_NAME, ['harbor', value]);
                this.httpClient.httpClientget(url).then((response) => {
                    // 返回处理
                    let data = response.data;
                    if (data) {
                        callback(new Error('镜像库名称名称重名,请换别的名称重试!'));
                    } else {
                        callback();
                    }
                });

            }
        };
        return {
            //==================================================
            //团队操作相关
            teamsData: [],    //团队数据列表
            teamQueryKey: '', //团队查询关键字
            selectTeamId: '', //选中的团队id
            selectTeamDesc: '', //选中的团队描述
            selectTeamNamespaceType: [],//选中的团队的原始命名空间类型
            teamDetail: {     //团队数据明细
                nameCn: '',
                nameEn: '',
                desc: '',
                nameCnDisable: true,
                nameEnDisable: true
            },
            rules1: {        //团队名称校验规则
                nameCn: [
                    { validator: validateNameCn, trigger: 'blur' }
                ],
                nameEn: [
                    { validator: validateNameEn, trigger: 'blur' }
                ],
                desc: []
            },

            //命名空间操作相关
            namespaceData: [],//团队对应命名空间数据列表
            selectNamespaceId: '',//选中的命名空间id
            physicalGroupSetVisible: false, //新增界面是否显示
            namespaceAddVisible: false,
            physicalGroupData: [],
            physicalGroupId: '',//设置的物理分区id
            checkNamespaceIds: [],//列表选择列
            namespaceDetail: {
                name: '',
                kubeName: '',
                harborProjectName: '',
                env: '0'
            },//命名空间明细
            rules2: {
                name: [
                    { validator: validateName, trigger: 'blur' }
                ],
                kubeName: [
                    { validator: validateKubeName, trigger: 'blur' }
                ],
                harborProjectName: [
                    { validator: validateHarborProjectName, trigger: 'blur' }
                ],
                env: []
            },//团队空间名称校验规则


            //用户操作相关
            userData: [],      //命名空间对应用户数据列表
            preAddUserData: [], //备选用户信息
            userId: [],
            preAddUserVisible: false, //新增界面是否显示
            checkUserIds: [],//列表选择列
            //===================================================

            // 团队查询遮罩
            loadingTeamDataTable: false,
            // 团队空间查询遮罩
            loadingTeamNamespaceDataTable: false,
            // 空间成员查询遮罩
            loadingTeamUserDataTable: false,
        }
    },
    created: function() {
        this.teamQuery();//初始化团队查询
    },
    methods: {
        //重置表单
        resetForm:function(formName) {
            if(this.$refs[formName]!=undefined){
                this.$refs[formName].resetFields();
            }
        },

        //重置数据
        resetData() {
            this.teamsData = [];
            this.namespaceData = [];
            this.userData = [];
            this.teamDetail.nameCn = '';
            this.teamDetail.nameEn = '';
            this.teamDetail.desc = '';
            this.teamDetail.nameCnDisable = true;
            this.teamDetail.nameEnDisable = true;
            this.selectTeamId = '';
            this.selectNamespaceId = '';
        },

        //团队列表查询
        teamQuery() {
            this.resetData();
            // 发起请求
            let parm = {
                superAdmin: this.userBaseInfo.getIsSuperAdmin(),
                currentUserId: this.userBaseInfo.getUserId(),
                queryKey: this.teamQueryKey
            };
            // 开启遮罩
            this.loadingTeamDataTable = true;
            this.httpClient.httpClientget(this.projectConfig.URL_API_TEAM, parm).then((response) => {
                // 遮罩结束
                this.loadingTeamDataTable = false;
            
                // 返回处理
                this.teamsData = response.data;
            }).catch(error => {
                // 遮罩结束
                this.loadingTeamDataTable = false;
            });
        },

        //团队列表单机事件
        teamChange: function(row, event, column) {
            this.selectTeamId = row.id;
            // //根据id团队明细查询
            let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_ID, [this.selectTeamId]);
            // 开启遮罩
            this.loadingTeamNamespaceDataTable = true;
            this.httpClient.httpClientget(url).then((response) => {
                // 遮罩结束
                this.loadingTeamNamespaceDataTable = false;
                // 返回处理
                this.$refs.teamDetail.resetFields();//清理团队明细表单
                let d = response.data;
                this.teamDetail.nameCn = d.nameCn;
                this.teamDetail.nameEn = d.nameEn;
                this.teamDetail.desc = d.desc;
                this.selectTeamDesc = d.desc;
                this.teamDetail.nameCnDisable = true;
                this.teamDetail.nameEnDisable = true;
                this.namespaceQuery();
            });

        },

        //根据团队id查询命名空间
        namespaceQuery() {
            // //根据id团队明细查询
            let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_NAMESPACE, [this.selectTeamId]);
            this.httpClient.httpClientget(url).then((response) => {
                // 返回处理
                this.namespaceData = response.data;

            });
        },

        //团队新增
        //===业务逻辑===
        //>>取消团队列表选中
        //>>清空团队明细输入框
        //>>清空团队选中的id
        //>>清空命名空间列表
        //>>清空命名空间成员列表
        //>>开发,测试,生产checkbox均设置为选中
        teamAdd() {
            this.$refs.teamTable.setCurrentRow();
            this.resetForm('teamDetail');
            this.teamDetail.nameCnDisable = false;
            this.teamDetail.nameEnDisable = false;
            this.selectTeamId = '';
            this.namespaceData = [];
            this.userData = [];
        },

        //团队保存
        //===业务逻辑===
        //(1) 如果团队选中的id不为空  则为更新操作
        //>> 比对表单变化 如果没有任何变化则提示没有变化的更新 
        //>>             否则有更新就提交更新请求 回调函数如果返回为成功,则做团队查询动作 同时清空表单和团队空间以及空间用户列表
        //>>                                    否则给出返回不成功的错误提示.
        //(2) 如果团队选中的id为空 则为新增操作
        //(3) 校验表单 如果表单通过就提交更新请求 回调函数如果返回为成功,则做团队查询动作 同时清空表单和团队空间以及空间用户列表
        //>>                                   否则给出返回不成功的错误提示.
        teamSave() {
            if (this.selectTeamId == '') {
                //(2)add
                this.$refs['teamDetail'].validate((valid) => {
                    if (valid) {
                        let currentUserId = this.userBaseInfo.getUserId();
                        let parm = {
                            id: '',
                            nameCn: this.teamDetail.nameCn,
                            nameEn: this.teamDetail.nameEn,
                            desc: this.teamDetail.desc
                        };
                        let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_CURRENT_USERID, [currentUserId]);
                        this.userBaseInfo.setOperObjectName(this.teamDetail.nameCn);
                        this.httpClient.httpClientPost(url, parm).then((response) => {
                            // 返回处理
                            this.$refs.teamDetail.resetFields();//清理团队明细表单
                            this.$refs.teamTable.setCurrentRow();
                            this.selectTeamId = '';
                            this.namespaceData = [];
                            this.userData = [];
                            this.teamQuery();
                        });
                    }
                });
            } else {
                //(1)update
                let parm = {
                    id: this.selectTeamId,
                    desc: this.teamDetail.desc
                };
                this.userBaseInfo.setOperObjectName(this.teamDetail.nameCn);
                this.httpClient.httpClientPatch(this.projectConfig.URL_API_TEAM, parm).then((response) => {
                    // 返回处理
                    this.$refs.teamDetail.resetFields();//清理团队明细表单
                    this.$refs.teamTable.setCurrentRow();
                    this.selectTeamId = '';
                    this.namespaceData = [];
                    this.userData = [];
                    this.teamQuery();
                });

            }
        },



        //团队停用
        teamDisable() {
            this.$confirm('此操作有风险, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                // 操作审计
                this.userBaseInfo.setOperObjectName(this.teamDetail.nameCn);
                // //根据id团队删除团队
                let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_ID, [this.selectTeamId]);
                this.httpClient.httpClientDelete(url).then((response) => {
                    // 返回处理
                    this.$refs.teamDetail.resetFields();//清理团队明细表单
                    this.$refs.teamTable.setCurrentRow();
                    this.selectTeamId = '';
                    this.namespaceData = [];
                    this.selectNamespaceId = '';
                    this.userData = [];
                    this.teamQuery();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        //命名空间列表单机事件
        namespaceChange: function(row, event, column) {
            this.selectNamespaceId = row.id;
            this.namespaceUserQuery();

        },
        //命名空间新增确定
        namespaceAdd() {
            this.$refs['namespaceDetail'].validate((valid) => {
                if (valid) {
                    this.namespaceAddVisible = false;
                    let parm = {
                        id: '',
                        name: this.namespaceDetail.name,
                        typeInt: this.namespaceDetail.env,
                        kubeName: this.namespaceDetail.kubeName,
                        harborProjectName: this.namespaceDetail.harborProjectName
                    };
                    let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_NAMESPACE, [this.selectTeamId]);
                    // 操作审计
                    this.userBaseInfo.setOperObjectName(this.teamDetail.nameCn + ':' + this.namespaceDetail.name);
                    this.httpClient.httpClientPost(url, parm).then((response) => {
                        // 返回处理
                        //重新查询命名空间列表
                        //情况user列表
                        this.selectNamespaceId = '';
                        this.userData = [];
                        this.namespaceQuery();
                    });
                }
            });
        },

        //命名空间停用
        namespaceDisable() {
            let namespaceIds = [];
            if (this.checkNamespaceIds.length > 0) {
                this.checkNamespaceIds.forEach((value) => {
                    namespaceIds.push(value.id);
                });
            }
            let parm = { namespaceIds: namespaceIds };
            let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_NAMESPACE, [this.selectTeamId]);
            // 操作审计
            this.userBaseInfo.setOperObjectName(this.selectTeamId);
            this.httpClient.httpClientDelete(url, parm).then((response) => {
                // 返回处理
                //重新查询命名空间列表
                //情况user列表
                this.selectNamespaceId = '';
                this.userData = [];
                this.namespaceQuery();

            });
        },

        //命名空间对应用户信息查询
        namespaceUserQuery() {
            let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_NAMESPACE_USER_SELECT, [this.selectNamespaceId]);
            // 遮罩开启
            this.loadingTeamUserDataTable = true;
            this.httpClient.httpClientget(url).then((response) => {
                // 遮罩结束
                this.loadingTeamUserDataTable = false;
                // 返回处理
                this.userData = response.data;
            });
        },

        //物理分组信息查询
        teamPhysicalGroupQuery() {
            this.physicalGroupId = '';
            // 发起请求
            this.httpClient.httpClientget(this.projectConfig.URL_API_TEAM_PHYSICAL_GROUP).then((response) => {
                // 返回处理
                this.physicalGroupData = response.data;
            });
        },

        //物理分组设置
        teamPhysicalGroupSet() {
            // 发起请求
            if (this.physicalGroupId == '') {
                this.$message({
                    showClose: true,
                    message: '请选择物理分区!',
                    type: 'warning'
                });
                return;
            }
            this.physicalGroupSetVisible = false;
            let namespaceIds = [];
            if (this.checkNamespaceIds.length > 0) {
                this.checkNamespaceIds.forEach((value) => {
                    namespaceIds.push(value.id);
                });
            }
            if (namespaceIds.length == 0) {
                this.$message({
                    showClose: true,
                    message: '请选择命名空间!',
                    type: 'warning'
                });
                return;
            }
            let parm = {
                namespaceIds: namespaceIds,
                physicalGroupId: this.physicalGroupId,
            };
            // 操作审计
            this.userBaseInfo.setOperObjectName('团队空间物理分组设置');
            this.httpClient.httpClientPatch(this.projectConfig.URL_API_TEAM_NAMESPACE_PHYSICAL_GROUP, parm).then((response) => {
                // 返回处理
                //重新查询命名空间列表
                //情况user列表
                this.selectNamespaceId = '';
                this.userData = [];
                this.namespaceQuery();

            });
        },
        //用户信息查询-备选用户信息
        teamUserQuery() {
            // 发起请求
            this.userId = [];
            let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_NAMESPACE_USER_UN_SELECT, [this.selectNamespaceId]);
            this.httpClient.httpClientget(url).then((response) => {
                // 返回处理
                const code = response.meta.code;
                this.preAddUserData = response.data;
            });
        },

        // 团队添加用户
        teamAddUsers() {
            // 发起请求
            if (this.userId.length == 0) {
                this.$message({
                    showClose: true,
                    message: '未选中任何用户!',
                    type: 'warning'
                });
                return;
            }
            this.preAddUserVisible = false;
            let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_NAMESPACE_USER, [this.selectNamespaceId]);
            let parm = { namespaceId: this.selectNamespaceId, userId: this.userId, namespace_Id: this.selectNamespaceId };
            // 操作审计
            this.userBaseInfo.setOperObjectName(this.selectNamespaceId + ':' + this.userId);
            this.httpClient.httpClientPost(url, parm).then((response) => {
                // 返回处理
                //命名空间用户信息查询
                this.namespaceUserQuery();
            });
        },
        usersChange: function(sels) {
            this.checkUserIds = sels;
        },
        namespacesChange: function(sels) {
            this.checkNamespaceIds = sels;
        },
        // 团队移除用户
        teamRemoveUsers() {
            let userId = [];
            if (this.checkUserIds.length > 0) {
                this.checkUserIds.forEach((value) => {
                    userId.push(value.id);
                });
            }
            let parm = { namespaceId: this.selectNamespaceId, userId: userId, namespace_Id: this.selectNamespaceId };
            let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_TEAM_NAMESPACE_USER, [this.selectNamespaceId]);
            // 操作审计
            this.userBaseInfo.setOperObjectName(this.selectNamespaceId + ':' + this.userId);
            this.httpClient.httpClientDelete(url, parm).then((response) => {
                // 返回处理
                //命名空间用户信息查询
                this.namespaceUserQuery();
            });
        }
    },
    computed: {
        //计算属性的定义
    }
}
</script>
<style>
.team .el-form {
    margin-top: 12px;
}

.team-form .el-form-item {
    display: inline-block;
    margin-left: 40px;
}

.team .form-btn {
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
    text-align: right;
}

.team .el-table th>.cell {
    padding: 0;
}

.team .el-table .cell {
    padding: 0;
}

.team .el-bar-bottom {
    position: relative;
}

.team .el-bar-bottom .delete {
    position: absolute;
    top: 48px !important;
    left: 124px;
}

.team .toolbar {
    margin-top: 8px;
}

.team .el-select {
    border: 1px solid #eaeaea;
    border-radius: 2px;
}

.team .el-bar .nbd {
    border-bottom: none;
}

.team .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #ccc;
}

.team el-icon-search {
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

.team .search .el-input {
    border: 1px solid #eaeaea;
}

.teamspace .el-table__body-wrapper {
    height: 150px;
    overflow: auto;
}

.search-list .el-table__body-wrapper {
    height: 800px;
    overflow: auto;
}
</style>